
import { useState } from 'react';
import { Activity, TrendingUp, Gauge, Zap, Server, Clock, HardDrive } from 'lucide-react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Progress } from '@/components/ui/progress';

export default function PerformanceAnalysis() {
  const [timeRange, setTimeRange] = useState('1h');
  const [selectedMetric, setSelectedMetric] = useState('cpu');

  const performanceData = {
    cpu: Array.from({ length: 50 }, (_, i) => Math.sin(i * 0.1) * 20 + 60),
    memory: Array.from({ length: 50 }, (_, i) => Math.sin(i * 0.15) * 15 + 45),
    disk: Array.from({ length: 50 }, (_, i) => Math.sin(i * 0.08) * 10 + 30),
    network: Array.from({ length: 50 }, (_, i) => Math.sin(i * 0.12) * 25 + 40),
  };

  const systemMetrics = [
    { name: 'CPU 使用率', value: 68, unit: '%', icon: Zap, color: 'text-blue-400' },
    { name: '内存使用', value: 72, unit: '%', icon: Server, color: 'text-green-400' },
    { name: '磁盘 I/O', value: 45, unit: '%', icon: HardDrive, color: 'text-purple-400' },
    { name: '响应时间', value: 125, unit: 'ms', icon: Clock, color: 'text-yellow-400' },
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h2 className="text-2xl font-bold text-white">性能分析</h2>
          <p className="text-gray-400">系统性能监控与优化分析</p>
        </div>
        <div className="flex space-x-3">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-32">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="1h">1小时</SelectItem>
              <SelectItem value="6h">6小时</SelectItem>
              <SelectItem value="24h">24小时</SelectItem>
              <SelectItem value="7d">7天</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm">
            <TrendingUp className="w-4 h-4 mr-2" />
            导出报告
          </Button>
        </div>
      </div>

      {/* System Overview */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        {systemMetrics.map((metric, index) => {
          const Icon = metric.icon;
          return (
            <Card key={index} className="glass-card p-6">
              <div className="flex items-center justify-between mb-4">
                <Icon className={`w-8 h-8 ${metric.color}`} />
                <div className="text-right">
                  <div className="text-2xl font-bold text-white">
                    {metric.value}{metric.unit}
                  </div>
                  <div className="text-sm text-gray-400">{metric.name}</div>
                </div>
              </div>
              <Progress 
                value={metric.unit === '%' ? metric.value : (metric.value / 200) * 100} 
                className="h-2" 
              />
            </Card>
          );
        })}
      </div>

      {/* Performance Charts */}
      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div className="xl:col-span-2">
          <Card className="glass-card p-6">
            <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
              <Activity className="w-5 h-5 mr-2" />
              实时性能监控
            </h3>

            <Tabs value={selectedMetric} onValueChange={setSelectedMetric}>
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="cpu">CPU</TabsTrigger>
                <TabsTrigger value="memory">内存</TabsTrigger>
                <TabsTrigger value="disk">磁盘</TabsTrigger>
                <TabsTrigger value="network">网络</TabsTrigger>
              </TabsList>
              
              <TabsContent value={selectedMetric} className="mt-4">
                <div className="h-64 bg-black/20 rounded-lg p-4">
                  <div className="h-full flex items-end justify-between space-x-1">
                    {performanceData[selectedMetric as keyof typeof performanceData].map((value, i) => (
                      <div
                        key={i}
                        className="bg-gradient-to-t from-blue-500 to-cyan-400 rounded-sm transition-all duration-300"
                        style={{
                          height: `${value}%`,
                          width: '1.8%',
                        }}
                      />
                    ))}
                  </div>
                </div>
                <div className="mt-4 flex justify-between text-sm text-gray-400">
                  <span>过去 {timeRange}</span>
                  <span>当前值: {performanceData[selectedMetric as keyof typeof performanceData].slice(-1)[0]?.toFixed(1)}%</span>
                </div>
              </TabsContent>
            </Tabs>
          </Card>
        </div>

        {/* System Status */}
        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white flex items-center">
            <Gauge className="w-5 h-5 mr-2" />
            系统状态
          </h3>
          
          <div className="space-y-4">
            <div className="p-4 bg-black/20 rounded-lg">
              <div className="flex items-center justify-between mb-2">
                <span className="text-gray-400">系统健康度</span>
                <span className="text-green-400 font-semibold">优秀</span>
              </div>
              <Progress value={92} className="h-3" />
              <div className="text-right text-sm text-gray-400 mt-1">92%</div>
            </div>

            <div className="space-y-3">
              <div className="flex justify-between">
                <span className="text-gray-400">运行时间</span>
                <span className="text-green-400">15天 4小时</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-400">处理请求</span>
                <span className="text-blue-400">1,24,567</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-400">平均响应</span>
                <span className="text-yellow-400">125ms</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-400">错误率</span>
                <span className="text-red-400">0.02%</span>
              </div>
            </div>

            <div className="pt-4 border-t border-gray-700">
              <h4 className="text-sm font-medium text-gray-300 mb-2">活跃服务</h4>
              <div className="space-y-2">
                {[
                  { name: '音频采集服务', status: 'active' },
                  { name: '信号处理服务', status: 'active' },
                  { name: '特征提取服务', status: 'active' },
                  { name: '定位追踪服务', status: 'warning' },
                ].map((service, index) => (
                  <div key={index} className="flex items-center justify-between">
                    <span className="text-gray-400 text-sm">{service.name}</span>
                    <div className={`status-indicator ${
                      service.status === 'active' ? 'status-active' : 'status-warning'
                    }`}></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* Detailed Analysis */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white">性能瓶颈分析</h3>
          <div className="space-y-4">
            <div className="p-4 bg-red-500/10 border border-red-500/20 rounded-lg">
              <div className="flex items-center mb-2">
                <div className="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                <span className="text-red-400 font-medium">高优先级</span>
              </div>
              <p className="text-gray-300 text-sm">
                特征提取模块 CPU 使用率过高，建议优化算法实现
              </p>
            </div>
            
            <div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
              <div className="flex items-center mb-2">
                <div className="w-2 h-2 bg-yellow-500 rounded-full mr-2"></div>
                <span className="text-yellow-400 font-medium">中优先级</span>
              </div>
              <p className="text-gray-300 text-sm">
                内存使用呈上升趋势，建议增加内存清理机制
              </p>
            </div>
            
            <div className="p-4 bg-green-500/10 border border-green-500/20 rounded-lg">
              <div className="flex items-center mb-2">
                <div className="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
                <span className="text-green-400 font-medium">优化建议</span>
              </div>
              <p className="text-gray-300 text-sm">
                可考虑启用缓存机制提升响应速度
              </p>
            </div>
          </div>
        </Card>

        <Card className="glass-card p-6">
          <h3 className="text-lg font-semibold mb-4 text-white">性能趋势</h3>
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <span className="text-gray-400">平均 CPU 使用率</span>
              <div className="flex items-center">
                <TrendingUp className="w-4 h-4 text-green-400 mr-1" />
                <span className="text-green-400">+2.3%</span>
              </div>
            </div>
            
            <div className="flex justify-between items-center">
              <span className="text-gray-400">内存峰值使用</span>
              <div className="flex items-center">
                <TrendingUp className="w-4 h-4 text-red-400 mr-1" />
                <span className="text-red-400">+8.1%</span>
              </div>
            </div>
            
            <div className="flex justify-between items-center">
              <span className="text-gray-400">网络吞吐量</span>
              <div className="flex items-center">
                <TrendingUp className="w-4 h-4 text-blue-400 mr-1" />
                <span className="text-blue-400">+12.7%</span>
              </div>
            </div>
            
            <div className="flex justify-between items-center">
              <span className="text-gray-400">响应时间</span>
              <div className="flex items-center">
                <TrendingUp className="w-4 h-4 text-yellow-400 mr-1 transform rotate-180" />
                <span className="text-yellow-400">-5.2%</span>
              </div>
            </div>

            <div className="pt-4 border-t border-gray-700">
              <Button className="w-full btn-primary">
                生成性能优化建议
              </Button>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}
